<template>
    <div>
        <el-row :gutter="10" class="row1">
            <el-col :span="24" class="col1">
                <div>用户统计</div>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px" class="row2">
            <el-col :span="1" class="col1"> </el-col>
            <el-col :span="2">
                <el-button type="warning" @click="bindSearchUser"
                    >搜索用户</el-button
                >
            </el-col>
            <el-col :span="4">
                <el-input
                    v-model="input1"
                    :prefix-icon="Search"
                    placeholder="用户名"
                    clearable
                ></el-input>
            </el-col>
        </el-row>

        <el-row :gutter="0" class="row3">
            <el-col :span="3" class="col1"> </el-col>
            <el-col :span="21" class="col2">
                用户名：{{ userList[0]?.user }}
            </el-col>
        </el-row>
        <el-row :gutter="0" class="row3">
            <el-col :span="3" class="col1"> </el-col>
            <el-col :span="21" class="col2">
                会员等级：{{ level }}
            </el-col>
        </el-row>
        <el-row :gutter="0" class="row4">
            <el-col :span="21" class="col2">
                <div id="main" style="width: 100%; height: 300px"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'

const input1 = ref('')

const userList = ref([])

// 搜索用户
const bindSearchUser = () => {
    getUserOder(input1.value)
    getUserList(input1.value)
    input1.value = ''
}

const level = ref('')
// 获取用户列表
const getUserList = async (user) => {
    const data = await axios({
        method: 'get',
        url: 'http://localhost:3000/users/list',
        //post请求参数使用data选项, get参数 params选项
        params: {
            pageSize: 200,
            name:user,
        },
    })
    const { code, info } = data.data
    if (code === 1) {
        level.value = info.list[0].level
    }
}

// 获取对应用户订单列表
const getUserOder = async (user) => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/goods/orderlist',
        //post请求参数使用data选项, get参数 params选项
        params: {
            pageSize: 100,
            shop: user,
        },
    })
    const { code, info } = res.data
    if (code === 1) {
        userList.value = info.list
        let x = []
        let y = []
        userList.value.map(item => {
            x.push(item.date.split(' ')[0])
            y.push(item.total_price)
        })
        xArr.value = x
        yArr.value = y
        drawBar()
    }
}

// ec
const xArr = ref([])
const yArr = ref([])
const drawBar = () => {
    // 初始化echarts
    const echart = echarts.init(document.getElementById('main'))
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                    backgroundColor: '#505765',
                },
            },
        },
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: xArr.value,
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '订单金额',
                // data: [150, 230, 224, 218, 135, 147, 260],
                data: yArr.value,
                type: 'line',
            },
        ],
    }
    echart.setOption(option)
}

onMounted(() => {
    drawBar()
    getUserOder('admin')
    getUserList('admin')
})
</script>

<style lang="scss" scoped>
.row1 {
    .col1 {
        padding: 20px;
        font-size: 20px;
        background-color: #f1f6fc;
    }
}
.row2 {
    .col1 {
    }
}
.row3 {
    margin-top: 10px;
}
.row4 {
    margin-top: 10px;
}
</style>
